<template>
  <div class="navbar-box">
    <ul>
      <li>
          <img src="../assets/01.png" alt="">
          超市
      </li>
      <li>
          <img src="../assets/02.png" alt="">
          数码电器
      </li>
      <li>
          <img src="../assets/03.png" alt="">
          嗨购服饰
      </li>
      <li>
          <img src="../assets/04.png" alt="">
          嗨购生鲜
      </li>
      <li>
          <img src="../assets/05.png" alt="">
          嗨购到家
      </li>
      <li>
          <img src="../assets/06.png" alt="">
          充值缴费
      </li>
      <li>
          <img src="../assets/07.png" alt="">
          9.9元拼
      </li>
      <li>
          <img src="../assets/08.png" alt="">
          领卷
      </li>
      <li>
          <img src="../assets/01.png" alt="">
          领金贴
      </li>
      <li>
          <img src="../assets/01.png" alt="">
          Plus会员
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"NavBar"
}
</script>

<style scoped>
  .navbar-box {
    width: 100%;
    height: 10rem;
    /* background-color: yellow; */
  }
  .navbar-box ul {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .navbar-box ul li {
    width: 20%;
    height: 50%;
    display: flex;
    font-size: 14px;
    color: gray;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: green; */

  }
  .navbar-box ul li img {
    width: 3.125rem;
    height: 3.125rem;
  }
</style>>

</style>